<template>
  <div>
    <div class="contain">
      <!-- 第一个实时监控表 -->
      <div class="top">
        <div class="top-left">安排表</div>
        <div class="top-right"><el-button size="mini" style="margin-right:10px">推送/更新</el-button><i class="el-icon-download"></i></div>
      </div>
      <div class="content">
        <el-table
          :data="TableDataAdopt"
          stripe>
          <el-table-column
            label="周一"
            align="center"
            >
            <el-table-column
            prop="bussName1"
            label="企业名称"
            align="center"
            width="90px">
            </el-table-column>
            <el-table-column
            prop="lackEle1"
            align="center"
            width="90px"
            label="认领缺口">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="周二"
            align="center"
            >
            <el-table-column
            prop="bussName2"
            label="企业名称"
            align="center"
            width="90px">
            </el-table-column>
            <el-table-column
            prop="lackEle2"
            align="center"
            label="认领缺口"
            width="90px">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="周三"
            align="center"
            >
            <el-table-column
            prop="bussName3"
            label="企业名称"
            align="center"
            width="90px">
            </el-table-column>
            <el-table-column
            prop="lackEle3"
            align="center"
            label="认领缺口"
            width="90px">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="周四"
            align="center"
            >
            <el-table-column
            prop="bussName4"
            label="企业名称"
            align="center"
            width="90px">
            </el-table-column>
            <el-table-column
            prop="lackEle4"
            align="center"
            label="认领缺口"
            width="90px">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="周五"
            align="center"
            >
            <el-table-column
            prop="bussName5"
            label="企业名称"
            align="center"
            width="90px">
            </el-table-column>
            <el-table-column
            prop="lackEle5"
            align="center"
            label="认领缺口"
            width="90px">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="周六"
            align="center"
            >
            <el-table-column
            prop="bussName6"
            label="企业名称"
            align="center"
            width="90px">
            </el-table-column>
            <el-table-column
            prop="lackEle6"
            align="center"
            label="认领缺口"
            width="90px">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="周日"
            align="center"
            >
            <el-table-column
            prop="bussName7"
            label="企业名称"
            align="center"
            width="90px">
            </el-table-column>
            <el-table-column
            prop="lackEle7"
            align="center"
            label="认领缺口"
            width="90px">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="contain">
      <!-- 第二个实时监控表 -->
      <div class="top">
        <div class="top-left">实时监控</div>
        <div class="top-right"><i class="el-icon-download"></i></div>
      </div>
      <div class="content">
        <el-table
          stripe
          :data="TableDataAdopt"
          :cell-style="cellStyle">
          <el-table-column
            label="周一"
            align="center"
            >
            <el-table-column
            prop="bussName1"
            label="企业名称"
            align="center"
            width="90px">
            </el-table-column>
            <el-table-column
            prop="perEle1"
            align="center"
            width="90px"
            label="进度">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="周二"
            align="center"
            >
            <el-table-column
            prop="bussName2"
            label="企业名称"
            align="center"
            width="90px">
            </el-table-column>
            <el-table-column
            prop="perEle2"
            align="center"
            label="进度"
            width="90px">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="周三"
            align="center"
            >
            <el-table-column
            prop="bussName3"
            label="企业名称"
            align="center"
            width="90px">
            </el-table-column>
            <el-table-column
            prop="perEle3"
            align="center"
            label="进度"
            width="90px">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="周四"
            align="center"
            >
            <el-table-column
            prop="bussName4"
            label="企业名称"
            align="center"
            width="90px">
            </el-table-column>
            <el-table-column
            prop="perEle4"
            align="center"
            label="进度"
            width="90px">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="周五"
            align="center"
            >
            <el-table-column
            prop="bussName5"
            label="企业名称"
            align="center"
            width="90px">
            </el-table-column>
            <el-table-column
            prop="perEle5"
            align="center"
            label="进度"
            width="90px">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="周六"
            align="center"
            >
            <el-table-column
            prop="bussName6"
            label="企业名称"
            align="center"
            width="90px">
            </el-table-column>
            <el-table-column
            prop="perEle6"
            align="center"
            label="进度"
            width="90px">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="周日"
            align="center"
            >
            <el-table-column
            prop="bussName7"
            label="企业名称"
            align="center"
            width="90px">
            </el-table-column>
            <el-table-column
            prop="perEle7"
            align="center"
            label="进度"
            width="100px">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import TableData from '@/utils/TableData.js'
export default {
  props: {
    dataItems: {
        type:Object,
        default:null
    }
  },
  data() {
    return {
      TableDataAdopt:[],//table的value值
      options:[]//备用
    }
  },
  mounted () {
    //主要是对对象数据进行矩阵转换，变成table可用的值
    let TableArray = [[],[],[],[],[],[],[]];
    // 
    for(let i = 0;i < TableData.TableData3.length;i++){
      TableArray[TableData.TableData3[i].week-1].push(TableData.TableData3[i])
    }
    
    let max = 0;//max是指最大矩阵列的最大长度
    for(let i = 0; i < 7 ; i++)
    {
    
      if(max < TableArray[i].length)
      {
        max = TableArray[i].length
      }
    }
    //新建矩阵并初始化
    let finalTableArray = [[],[],[],[],[],[],[]];
    for(let i = 0; i < 7;i++)
    {
      for(let j = 0;j < max;j++)
      {
        finalTableArray[i].push({"bussName":'',"lackEle":'',"process":'',"all":''})
      }
    }
    for(let i = 0;i < 7;i++)
    {
      for(let j = 0;j < TableArray[i].length;j++)
      {
        finalTableArray[i][j] = TableArray[i][j];
      }
    }
    let finalTable = []
    for(let i = 0;i < max;i++){
      finalTable.push([])
    }
    for(let i = 0;i < 7;i++){
      for(let j = 0;j < max;j++){
        finalTable[j][i] = finalTableArray[i][j]
      }
    }
    console.log(finalTable)
    //对最终table的value值进行传递，
    for(let i = 0;i < max;i++){
        let temp = {}
        temp.week1 = finalTable[i][0].week;
        temp.bussName1 = finalTable[i][0].bussName;
        temp.lackEle1 = finalTable[i][0].lackEle;
        if(finalTable[i][0].process != ''&& finalTable[i][0].all != ''){
          temp.perEle1 = finalTable[i][0].process+'/'+ finalTable[i][0].all;
        }else{
          temp.perEle1 = '';
        }
        temp.week2 = finalTable[i][1].week;
        temp.bussName2 = finalTable[i][1].bussName;
        temp.lackEle2 = finalTable[i][1].lackEle;
        if(finalTable[i][1].process != ''&& finalTable[i][1].all != ''){
          temp.perEle2 = finalTable[i][1].process+'/'+ finalTable[i][1].all;
        }else{
          temp.perEle2 = '';
        }
        temp.week3 = finalTable[i][2].week;
        temp.bussName3 = finalTable[i][2].bussName;
        temp.lackEle3 = finalTable[i][2].lackEle;
        if(finalTable[i][2].process != ''&& finalTable[i][2].all != ''){
          temp.perEle3 = finalTable[i][2].process+'/'+ finalTable[i][2].all;
        }else{
          temp.perEle3 = '';
        }
        temp.week4 = finalTable[i][3].week;
        temp.bussName4 = finalTable[i][3].bussName;
        temp.lackEle4 = finalTable[i][3].lackEle;
        if(finalTable[i][3].process != ''&& finalTable[i][3].all != ''){
          temp.perEle4 = finalTable[i][3].process+'/'+ finalTable[i][3].all;
        }else{
          temp.perEle4 = '';
        }
        temp.week5 = finalTable[i][4].week;
        temp.bussName5 = finalTable[i][4].bussName;
        temp.lackEle5 = finalTable[i][4].lackEle;
        if(finalTable[i][4].process != ''&& finalTable[i][4].all != ''){
          temp.perEle5 = finalTable[i][4].process+'/'+ finalTable[i][4].all;
        }else{
          temp.perEle5 = '';
        }
        temp.week6 = finalTable[i][5].week;
        temp.bussName6 = finalTable[i][5].bussName;
        temp.lackEle6 = finalTable[i][5].lackEle;
        if(finalTable[i][5].process != ''&& finalTable[i][5].all != ''){
          temp.perEle6 = finalTable[i][5].process+'/'+ finalTable[i][5].all;
        }else{
          temp.perEle6 = '';
        }
        temp.week7 = finalTable[i][6].week;
        temp.bussName7 = finalTable[i][6].bussName;
        temp.lackEle7 = finalTable[i][6].lackEle;
        if(finalTable[i][6].process != ''&& finalTable[i][6].all != ''){
          temp.perEle7 = finalTable[i][6].process+'/'+ finalTable[i][6].all;
        }else{
          temp.perEle7 = '';
        }
        this.TableDataAdopt.push(temp);
    }
  },
  methods: {
    // 对颜色选择器进行操作，左>右设置为红色
    cellStyle(row, column, rowIndex, columnIndex) {
      console.log(columnIndex)
      if((row.row.perEle1 != '' && row.columnIndex == 1)){
        let split1 = row.row.perEle1.split('/');
        if(parseInt(split1[0])>parseInt(split1[1]))
        {
          return "color:red"
        }
      }else if(row.row.perEle6 != '' && row.columnIndex == 11){
        let split1 = row.row.perEle6.split('/');
        if(parseInt(split1[0])>parseInt(split1[1]))
        {
          return "color:red"
        }
      }else if(row.row.perEle2 != '' && row.columnIndex == 3){
        let split1 = row.row.perEle2.split('/');
        if(parseInt(split1[0])>parseInt(split1[1]))
        {
          return "color:red"
        }
      }else if(row.row.perEle3 != '' && row.columnIndex == 5){
        let split1 = row.row.perEle3.split('/');
        if(parseInt(split1[0])>parseInt(split1[1]))
        {
          return "color:red"
        }
      }else if(row.row.perEle4 != '' && row.columnIndex == 7){
        let split1 = row.row.perEle4.split('/');
        if(parseInt(split1[0])>parseInt(split1[1]))
        {
          return "color:red"
        }
      }else if(row.row.perEle5 != '' && row.columnIndex == 9){
        let split1 = row.row.perEle5.split('/');
        if(parseInt(split1[0])>parseInt(split1[1]))
        {
          return "color:red"
        }
      }else if(row.row.perEle7 != '' && row.columnIndex == 13){
        let split1 = row.row.perEle7.split('/');
        if(parseInt(split1[0])>parseInt(split1[1]))
        {
          return "color:red"
        }
      }
    }
  },
}
</script>

<style scoped>
.top{
  height: 30px;
}
.contain{
  margin-bottom: 20px;
}
.top-left{
  display: block;
  float: left;
}
.top-right{
  display: block;
  float: right;
}
.content{
  margin-top: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #EBEEF5;
}
</style>